<template>
  <view :style="viewColor">
    <view class="product-con">
      <h-nav-bar
        v-if="navbarisshow"
        class="top_nav"
        :title="'商品详情'"
        @toclickLeft="toclickLeft"
        :fixed="true"
        :leftIcon="navbarisshow ? 'back' : 'closeempty'"
        color="#333"
        backgroundColor="#fff"
      >
      </h-nav-bar>
      <!-- #ifdef H5 -->
      <!-- <view class="head-wrapper" :style="'top:' + statusBarHeight">
        <view class="head-menu">
          <view class="iconfont icon-xiangzuo" @click="returns"></view>
          <view class="iconfont icon-shouye4" @click="goHome"></view>
        </view>
      </view> -->
      <!-- #endif -->
      <view v-if="storeInfo && storeInfo.merchant">
        <scroll-view
          :scroll-top="scrollTop"
          :scroll-y="true"
          :scroll-with-animation="true"
          :style="'height:' + height + 'px;'"
          @scroll="scroll"
        >
          <view id="past0">
            <productConSwiper
              :imgUrls="storeInfo.slider_image"
              :videoCoverImg="videoCoverImg"
              :isPlays="isPlay"
              :statusHeight="statusHeight"
              @videoPlay="videoPlay"
              :videoline="storeInfo.video_link"
            ></productConSwiper>
            <!--有氛围图-->
            <view
              v-if="storeInfo.atmosphere_pic"
              :style="{ backgroundImage: `url(${storeInfo?.atmosphere_pic})` }"
              class="nav acea-row row-between-wrapper"
            >
              <view class="money skeleton-rect"
                >￥<text class="num">{{ storeInfo?.price }}</text>
                <text v-if="!svipData" class="y-money">￥{{ storeInfo?.ot_price }}</text>
                <view
                  class="atmosphere"
                  v-if="svipData && svipData?.show_svip_price && svipData?.show_svip"
                  style="display: inline-block"
                >
                  <text class="vip-money">￥{{ storeInfo?.svip_price }}</text>
                  <image class="vip-image" src="/static/images/svip.png"></image>
                </view>
              </view>
            </view>
            <view class="wrapper">
              <view
                v-if="storeInfo.atmosphere_pic"
                class="introduce skeleton-rect acea-row row-between row-bottom atmosphere"
              >
                <view>
                  <text
                    v-if="storeInfo?.merchant && storeInfo?.merchant?.type_name"
                    class="font-bg-red bt-color"
                    >{{ storeInfo?.merchant?.type_name }}</text
                  >
                  <text
                    v-else-if="storeInfo?.merchant && storeInfo?.merchant?.is_trader"
                    class="font-bg-red bt-color"
                    >自营</text
                  >
                  {{ storeInfo?.store_name }}
                </view>
                <view class="fenxiang_btn" @click="listenerActionSheet">
                  <view class="iconfont icon-fenxiang"></view>
                  分享
                </view>
              </view>
              <view v-if="storeInfo?.atmosphere_pic" class="integral_count skeleton-rect">
                <text v-if="storeInfo?.max_integral > 0" class="integral"
                  >积分最高可抵扣{{ storeInfo?.max_integral }}元</text
                >
                <text v-if="storeInfo?.delivery_free == 1" class="integral">包邮</text>
              </view>
              <!--无氛围图-->
              <view v-else class="share acea-row row-between row-bottom">
                <view class="money p-color skeleton-rect" style="min-width: 70rpx">
                  ￥
                  <text class="num">{{ storeInfo?.price }}</text>
                  <view
                    v-if="svipData && svipData?.show_svip_price && svipData?.show_svip"
                    style="display: inline-block"
                  >
                    <text class="vip-money">￥{{ storeInfo?.svip_price }}</text>
                    <image class="vip-image" src="/static/images/svip.png"></image>
                  </view>
                </view>
                <view @click="listenerActionSheet" class="fenxiang_btn">
                  <view class="iconfont icon-fenxiang"></view>
                  分享
                </view>
              </view>
              <!-- <view v-if="svipData && !svipData.is_svip && svipData.show_svip"
                class="svipCon acea-row row-between-wrapper skeleton-rect" style="margin-top: 20rpx;">
                <view class="acea-row row-between-wrapper">
                  <image src="@/static/shop/svip_user.png"></image>
                  <view class="">开通 SVIP会员 立省<text>{{svipData.save_money}}元</text></view>
                </view>
                <navigator class="svipBtn" url="/pages/annex/vip_paid/index">
                  立即开通
                  <text class="iconfont icon-jiantou"></text>
                </navigator>
              </view> -->
              <view v-if="!storeInfo?.atmosphere_pic" class="integral_count skeleton-rect">
                <text v-if="storeInfo?.max_integral > 0" class="integral"
                  >积分最高可抵扣{{ storeInfo?.max_integral }}元</text
                >
                <text v-if="storeInfo.delivery_free == 1" class="integral">包邮</text>
              </view>
              <view v-if="!storeInfo?.atmosphere_pic" class="introduce skeleton-rect">
                <text v-if="storeInfo?.merchant.type_name" class="font-bg-red bt-color">{{
                  storeInfo?.merchant?.type_name
                }}</text>
                <text v-else-if="storeInfo?.merchant?.is_trader" class="font-bg-red bt-color"
                  >自营</text
                >
                {{ storeInfo?.store_name || '' }}
              </view>
              <view
                class="label acea-row row-between-wrapper"
                :style="{
                  'padding-bottom': coupon.list.length || storeInfo.top_pid ? '0px' : '10px',
                }"
              >
                <view class="skeleton-rect">市场价:￥{{ storeInfo.ot_price || 0 }}</view>
                <view class="skeleton-rect"> 库存:{{ storeInfo.stock ? storeInfo.stock : 0 }}</view>
                <!-- {{ storeInfo.unit_name ? storeInfo.unit_name : '' }} -->
                <view class="skeleton-rect"> 销量:{{ storeInfo.sales ? storeInfo.sales : 0 }}</view>
                <!-- {{ storeInfo.unit_name ? storeInfo.unit_name : '' }} -->
              </view>
              <!-- <navigator v-if="storeInfo.top_pid" hover-class="none"
                :url="`/pages/activity/rank/index?cate_id=${storeInfo.top_pid}`" class="label">
                <view class="rank_list acea-row row-between-wrapper">
                  <view class="acea-row row-between-wrapper">
                    <text class="rank_title"></text>
                    <view>{{ storeInfo.top_name }} · 第{{ storeInfo.top_num }}名</view>
                  </view>
                  <text class="iconfont icon-xiala1"></text>
                </view>
              </navigator> -->
              <view
                class="coupon acea-row row-between-wrapper skeleton-rect"
                @click="couponTap"
                style="margin-top: 20rpx"
                v-if="false && coupon.list.length > 0"
              >
                <view class="hide line1 acea-row">
                  优惠券：
                  <view class="activity" v-for="(item, index) in coupon?.list" :key="index">
                    满{{ item?.use_min_price }}减{{ item?.coupon_price }}</view
                  >
                </view>
                <view class="iconfont icon-jiantou"></view>
              </view>
            </view>
            <view
              v-if="false"
              class="attribute acea-row row-between-wrapper skeleton-rect"
              @click="selecAttr"
            >
              <view class="acea-row row-between-wrapper"
                >{{ attrTxt }}：
                <text class="atterTxt">{{ attrValue }}</text>
              </view>
              <view class="iconfont icon-jiantou"></view>
            </view>
            <view
              v-if="specsInfo.params && specsInfo.params.length > 0"
              class="attribute acea-row row-between-wrapper"
              @click="seeSpecs"
            >
              <view class="acea-row row-middle">
                参数：
                <view class="list line1">
                  <template v-for="(item, index) in specsInfo.params" :key="index">
                    <text class="item params" v-if="index < 2">{{ item?.name }}</text>
                  </template>
                  <text>...</text>
                </view>
              </view>
              <view class="iconfont icon-jiantou"></view>
            </view>
            <!--运费-->
            <view
              v-if="shipping || shippingValue"
              class="attribute acea-row row-between-wrapper"
              @click="showShip"
            >
              <view class="acea-row row-between-wrapper"
                >运费：
                <text class="atterTxt">{{ shippingValue }}</text>
              </view>
              <view class="iconfont icon-jiantou"></view>
            </view>
            <!--保障-->
            <view
              v-if="guarantee && guarantee.length"
              class="attribute acea-row row-between-wrapper"
              @click="showGuaranee"
            >
              <view class="acea-row row-between-wrapper"
                >保障：
                <view class="guaranteeAttr">
                  <text
                    class="atterTxt1"
                    :class="item?.guarantee_name ? 'hasAttr' : ''"
                    v-for="(item, index) in guarantee"
                    :key="index"
                  >
                    {{ item?.guarantee_name ? item?.guarantee_name : '' }}
                  </text>
                </view>
              </view>
              <view class="iconfont icon-jiantou"></view>
            </view>
          </view>
          <!--优惠套餐-->
          <view class="combo" v-if="comboList && comboList.length > 0">
            <view class="title acea-row row-between-wrapper">
              <view>优惠套餐({{ comboTotal }}) </view>
              <view class="praise" @click="openCombo">
                查看全部
                <text class="iconfont icon-jiantou"></text>
              </view>
            </view>
            <scroll-view
              scroll-x="true"
              style="white-space: nowrap; display: flex; height: 180rpx"
              :show-scrollbar="false"
            >
              <view class="img-box">
                <view class="combo_item" v-for="(item, index) in comboList" :key="index">
                  <view
                    class="img-item"
                    v-for="(itemn, indexn) in item?.discountsProduct"
                    :key="indexn"
                  >
                    <image :src="itemn.image" mode="" @click="openCombo"></image>
                    <text v-if="indexn != item?.count - 1" class="iconfont icon-jiahao2"></text>
                  </view>
                  <view class="list_total">
                    <view class="list_num">共{{ item?.count }}件</view>
                    <view class="list_price p-color">省 ¥{{ item?.max_price }}</view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="userEvaluation" id="past1" v-if="replyCount && replyCount > 0">
            <view class="title acea-row row-between-wrapper skeleton-rect">
              <view>用户评价({{ replyCount }})</view>
              <navigator
                class="praise"
                hover-class="none"
                :url="'/pagesS/goods_comment_list/index?product_id=' + id"
              >
                <text class="t-color">{{ replyChance }}</text
                >好评率
                <text class="iconfont icon-jiantou"></text>
              </navigator>
            </view>
            <block v-if="replyCount && replyCount > 0">
              <userEvaluation :reply="reply"></userEvaluation>
            </block>
          </view>
          <!-- 种草秀 -->
          <!-- <view class="userPlant" v-if="storeInfo.community && storeInfo.community.length > 0">
            <view class="title acea-row row-between-wrapper">
              <view>种草秀 </view>
              <navigator class="praise" hover-class="none"
                :url="'/pages/plantGrass/plant_show/index?spu_id=' + storeInfo.spu_id">
                查看全部
                <text class="iconfont icon-jiantou"></text>
              </navigator>
            </view>
            <view class="imgList acea-row">
              <view class="pictrue" v-for="(item, index) in storeInfo.community" :key="index" v-if="index <= 2"
                @click="goPlant(item)">
                <image :src="item?.image[0]" class="image"></image>
                <image v-if="item?.is_type == 2" class="video_img" src="@/static/shop/stop.png" mode="">
                </image>
              </view>
            </view>
          </view> -->
          <!-- 商铺信息 -->
          <view class="store-wrapper" v-if="false && storeInfo.merchant && hide_mer_status != 1">
            <view class="store-hd skeleton-rect">
              <view class="store-info">
                <view class="logo">
                  <image :src="storeInfo.merchant.mer_avatar" mode=""></image>
                </view>
                <view class="info">
                  <view class="name line1">
                    <text>{{
                      storeInfo.merchant.mer_name ? storeInfo.merchant.mer_name : ''
                    }}</text>
                    <image
                      v-if="
                        margin_ico_switch == 1 && margin_ico && storeInfo.merchant.is_margin == 10
                      "
                      :src="margin_ico"
                      class="store-margin"
                    ></image>
                    <text v-if="storeInfo.merchant.type_name" class="font-bg-red ml8 bt-color">{{
                      storeInfo.merchant.type_name
                    }}</text>
                    <text v-else-if="storeInfo.merchant.is_trader" class="font-bg-red ml8 bt-color"
                      >自营</text
                    >
                  </view>
                  <view v-if="storeInfo.merchant.care_count" class="txt">
                    {{
                      storeInfo.merchant.care_count < 10000
                        ? storeInfo.merchant.care_count
                        : (storeInfo.merchant.care_count / 10000).toFixed(2) + '万'
                    }}人关注
                  </view>
                  <view v-else class="txt">0人关注</view>
                </view>
                <navigator
                  v-if="hide_mer_status != 1"
                  :url="'/pagesS/store/detail?id=' + storeInfo.merchant.mer_id"
                  class="link"
                  hover-class="none"
                  >进店</navigator
                >
              </view>
              <view class="score-wrapper">
                <view class="item">
                  商品描述<text>{{ storeInfo.merchant.product_score }}</text>
                </view>
                <view class="item">
                  卖家服务<text>{{ storeInfo.merchant.service_score }}</text>
                </view>
                <view class="item">
                  物流服务<text>{{ storeInfo.merchant.postage_score }}</text>
                </view>
              </view>
            </view>
            <view
              v-if="storeInfo.merchant.recommend && storeInfo.merchant.recommend.length > 0"
              class="con-box"
            >
              <view class="title">店铺推荐</view>
              <scroll-view
                :scroll-x="true"
                style="white-space: nowrap; display: flex"
                show-scrollbar="false"
              >
                <view class="img-box">
                  <view
                    class="img-item"
                    v-for="(item, index) in storeInfo.merchant.recommend"
                    :key="index"
                    @click="goProDetail(item)"
                  >
                    <easy-loadimage mode="widthFix" :image-src="item?.image"></easy-loadimage>
                    <!-- <image :src="item?.image"></image> -->
                    <view class="txt">
                      <view class="title line1">{{ item?.store_name }}</view>
                      <view class="price"> <text>￥</text>{{ item?.price }} </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="product-intro" id="past3">
            <view class="title">产品介绍</view>
            <view class="conter" v-if="description">
              <view
                v-if="description.type == 0"
                class="description"
                v-html="description.content.replace(/<br\/>/gi, '')"
              >
              </view>

              <view v-else class="product_content">
                <view v-if="description.content && description.content.title" class="title">
                  {{ description.content.title }}
                </view>
                <view v-if="description.content && description.content.image" class="pictures">
                  <image
                    v-for="(item, index) in description.content.image"
                    :key="index"
                    :src="item"
                  >
                  </image>
                </view>
              </view>
            </view>
            <!-- 价格说明 -->
            <view v-if="priceRule.content" class="price-info">
              <view class="price-title">{{ priceRule.rule_name }}</view>

              <view class="description" v-html="priceRule.content.replace(/<br\/>/gi, '')"></view>
            </view>
          </view>
          <view style="height: 120rpx"></view>
        </scroll-view>
      </view>
      <view class="footer acea-row row-between-wrapper" v-if="false">
        <view
          v-if="storeInfo.merchant && storeInfo.merchant.services_type == 1"
          class="item skeleton-rect"
          @click="call"
        >
          <view class="iconfont icon-kefu"></view>
          <view>客服</view>
        </view>
        <view v-else class="item skeleton-rect" @click="couponTap2">
          <view class="iconfont icon-kefu"></view>
          <view>客服</view>
        </view>
        <view @click="setCollect" class="item skeleton-rect">
          <view class="iconfont icon-shoucang1" v-if="storeInfo.isRelation"></view>
          <view class="iconfont icon-shoucang" v-else></view>
          <view>收藏</view>
        </view>
        <view
          @click="gotocar"
          class="animated item skeleton-rect"
          :class="animated == true ? 'bounceIn' : ''"
        >
          <view class="iconfont icon-gouwuche1">
            <text v-if="CartCount > 0" class="num">{{ CartCount || 0 }}</text>
          </view>
          <view>购物车</view>
        </view>
        <view v-if="attr.productSelect.stock != 0" class="bnt acea-row skeleton-rect">
          <form @submit="joinCart" report-submit="true">
            <button
              v-if="storeInfo.type != 1 && storeInfo.type != 2"
              class="joinCart bnts"
              form-type="submit"
            >
              加入购物车
            </button>
          </form>
          <form @submit="goBuy" report-submit="true" v-if="attr.productSelect">
            <button
              class="buy bnts"
              :class="storeInfo.type == 1 || storeInfo.type == 2 ? 'virtual_buy' : ''"
              form-type="submit"
              :disabled="attr.productSelect.stock == 0"
            >
              立即购买
            </button>
          </form>
        </view>
        <view v-else class="bnt acea-row skeleton-rect">
          <form report-submit="true">
            <button
              v-if="arrival_notice"
              class="buy bnts sold_out"
              form-type="submit"
              @click="arrivalNotice"
            >
              到货通知
            </button>
            <button v-else class="buy bnts sold_out" form-type="submit" disabled>商品已售罄</button>
          </form>
        </view>
      </view>
      <block v-if="sharePacket?.max && sharePacket?.max > 0">
        <shareRedPackets
          :sharePacket="sharePacket"
          @listenerActionSheet="listenerActionSheet"
          @closeChange="closeChange"
          :showAnimate="showAnimate"
          @boxStatus="boxStatus"
        ></shareRedPackets>
      </block>
      <!-- 组件 -->
      <productWindow
        :attr="attr"
        :isShow="1"
        :iSplus="1"
        @myevent="onMyEvent"
        @ChangeAttr="ChangeAttr"
        @ChangeCartNum="ChangeCartNum"
        @attrVal="attrVal"
        @iptCartNum="iptCartNum"
        id="product-window"
        :maxCount="max_count"
        :minCount="min_count"
        :svipPrice="svipPrice"
        :image="storeInfo?.image"
      >
      </productWindow>
      <block v-if="coupon.coupon">
        <couponListWindow
          :coupon="coupon"
          @ChangCouponsClone="ChangCouponsClone"
          @ChangCoupons="ChangCoupons"
          @ChangCouponsUseState="ChangCouponsUseState"
        ></couponListWindow>
      </block>
      <specs :specsInfo="specsInfo" @myevent="mySpecs"></specs>
      <!-- 分享按钮 -->
      <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
        <!-- #ifndef MP -->
        <button
          class="item"
          :class="weixinStatus ? 'item3' : ''"
          hover-class="none"
          v-if="weixinStatus === true"
          @click="H5ShareBox = true"
        >
          <view class="iconfont icon-weixin3"></view>
          <view class="">发送给朋友</view>
        </button>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <button
          class="item"
          :class="weixinStatus ? 'item3' : ''"
          open-type="share"
          hover-class="none"
          @click="goFriend"
        >
          <view class="iconfont icon-weixin3"></view>
          <view class="">发送给朋友</view>
        </button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="item" @click="appShare('WXSceneSession')">
          <view class="iconfont icon-weixin3"></view>
          <view class="">分享给好友</view>
        </view>
        <!-- #endif -->
        <button
          class="item"
          :class="weixinStatus ? 'item3' : ''"
          hover-class="none"
          @click="goPoster"
        >
          <view class="iconfont icon-haibao"></view>
          <view class="">生成海报</view>
        </button>
        <!-- <button class="item" :class="weixinStatus ? 'item3' : ''" hover-class="none" @click="copyPwd">
          <view class="iconfont icon-fuzhikouling1"></view>
          <view>生成口令</view>
        </button> -->
      </view>
      <view class="mask" v-if="posters" @click="listenerActionClose"></view>
      <!--口令复制结果-->
      <copyPassword :isCopy="isCopy" :copyUrl="copyUrl" @close="closeCopy"></copyPassword>
      <!-- 海报展示 -->
      <view class="poster-pop" v-if="posterImageStatus">
        <image src="@/static/shop/poster-close.png" class="close" @click="posterImageClose"></image>
        <image :src="posterImage"></image>
        <!-- #ifndef H5  -->
        <view class="save-poster" @click="savePosterPath">保存到手机</view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="keep">长按图片可以保存到手机</view>
        <!-- #endif -->
      </view>
      <view class="mask" v-if="posterImageStatus"></view>
      <canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
      <!-- 发送给朋友图片 -->
      <view class="share-box" v-if="H5ShareBox">
        <image src="@/static/shop/share-info.png" @click="H5ShareBox = false"></image>
      </view>
      <guaranteeTemplate
        ref="guartemplate"
        :guarantee="guarantee"
        :shipping="shipping"
      ></guaranteeTemplate>
      <!-- #ifndef H5 -->
      <passwordPopup></passwordPopup>
      <!-- #endif -->
      <!--套餐产品弹窗-->
      <discounts-goods ref="discounts" :id="id" :uid="uid"></discounts-goods>
    </view>
  </view>
  <h-login top="80" ref="login"></h-login>
  <h-authpup
    ref="authpup"
    type="top"
    @changeAuth="changeAuth"
    permissionID="CALL_PHONE"
  ></h-authpup>
  <h-authpup
    ref="authpupcun"
    type="top"
    @changeAuth="changeAuthcun"
    permissionID="WRITE_EXTERNAL_STORAGE"
  ></h-authpup>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick } from 'vue'
import { onLoad, onReachBottom, onReady, onShow, onPageScroll } from '@dcloudio/uni-app'
import { showToast, navigateTo, navigateBack } from '@/utils'
var { proxy } = getCurrentInstance()
const login = ref(null) // 登录组件实例
import {
  getProductDetail,
  getProductCode,
  collectAdd,
  collectDel,
  postCartAdd,
  arrivalNoticeApi,
  copyPasswordApi,
  getDiscountsLst,
  priceRuleApi,
} from '@/api/shop/store.js'
import { getCartCounts } from '@/api/shop/order.js'
import { getUserInfo, imgToBase } from '@/api/shop/user.js'
import { getCoupons, getShopCoupons } from '@/api/shop/api.js'
import { getconfig } from '@/api/shop/public.js'
import { useMemberStore, configWebsitStore } from '@/stores'

import { HTTP_REQUEST_URL } from '@/config/app'
import userEvaluation from '@/components/userEvaluation'
import productConSwiper from '@/components/productConSwiper'
import shareRedPackets from '@/components/shareRedPackets'
import productWindow from '@/components/productWindow'
import couponListWindow from '@/components/couponListWindow'
import specs from '@/components/specs/index.vue'
import copyPassword from '@/components/copyPassword'
import guaranteeTemplate from '@/components/freightGuarantee'
import discountsGoods from './component/discountsGoods'
// #ifndef H5
import passwordPopup from '@/components/passwordPopup'
// #endif
import { arrivalSubscribe } from '@/utils/SubscribeMessage.js'
import { getPlatFormCoupon } from '@/api/shop/api.js'
const domain = ref(HTTP_REQUEST_URL())
const margin_ico_switch = ref(1)
const margin_ico = ref(null)
const uid = ref(null)
const viewColor = ref(
  '--view-theme: #E93323;--view-assist:#FF7612;--view-priceColor:#E93323;--view-bgColor:rgba(255, 118, 18,.1);--view-minorColor:rgba(233, 51, 35,.1);--view-bntColor11:#FDA923;--view-bntColor12:#FD6523;--view-bntColor21:#F11B09;--view-bntColor22:#F67A38;',
)
const authpup = ref(null)
const authpupcun = ref()
const isLogin = ref(false)
const id = ref(null)
const statusBarHeight = ref('0px')
const videoCoverImg = ref('')
const isPlay = ref(0)
//属性是否打开
const coupon = ref({
  coupon: false,
  list: [],
})
const priceRule = ref({})
const CartCount = ref(0)
const scrollTop = ref(0)
const height = ref(0)
const attrValue = ref('') //已选属性
const animated = ref(false) //购物车动画
const hide_mer_status = ref(1)
const tagStyle = ref({
  img: 'width:100%;display:block;',
})
const attrTxt = ref('选择') //属性页面提示
const isOpen = ref(false) //是否打开属性组件
const source = ref('')
const currSpid = ref('')
const showAnimate = ref(true) // 动画状态
const opacity = ref(0)
const scrollY = ref(0)
const lock = ref(false)
const topArr = ref([])
const posters = ref(false)
const weixinStatus = ref(false)
const posterImageStatus = ref(false)
const posterImage = ref('') //海报路径
const canvasStatus = ref(false) //海报绘图标签
const posterbackgd = ref('/static/shop/posterbackgd.png')
const actionSheetHidden = ref(true)
const codeImg = ref('')
const share_pic = ref('https://ossresource.miyingbl.com/def/30513202303192217208473.png')
const site_name = ref('咪婴商城')
const copyUrl = ref('')
const isCopy = ref(false)
const H5ShareBox = ref(false) //公众号分享图片
const isAuto = ref(false) //没有授权的不会自动授权
const isShowAuth = ref(false) //是否隐藏授权
const discounts = ref(null)
const guartemplate = ref(null)
const arrival_notice = ref(0) //是否开启到货通知
const couponList = ref([])

onShow(() => {
  var token = useMemberStore().token
  var shopConfig = configWebsitStore().shopConfig
  site_name.value = shopConfig.site_name
  share_pic.value = shopConfig.share_pic
  getConfigFun()
})

function arrivalNotice() {
  arrivalNoticeApi({ unique: uniqueValue.value, type: 3, product_id: id.value })
    .then((res) => {
      showToast(res.message)
    })
    .catch((err) => {
      navigateBack()
    })
}
const statusHeight = ref(0)

onLoad((options) => {
  console.log(options)
  var store = useMemberStore()
  statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight + 'px'
  id.value = options?.id
  uid.value = store.userInfo?.user?.uid
  if (store.token) {
    isLogin.value = true
  } else {
    isLogin.value = false
  }
  // uni.getStorage({
  //     key: 'user',
  //     success(res) {
  //         let member = JSON.parse(res.data)
  //         console.log(member)
  //         if (member.userInfo) {
  //             uid.value = member.userInfo.user.uid
  //         }
  //         if (member.token) {
  //             isLogin.value = true
  //         } else {
  //             isLogin.value = false
  //         }
  //     },
  //     fail() {
  //         uid.value = null
  //         isLogin.value = false
  //     },
  // })
  getGoodsDetails()
  uni.getSystemInfo({
    success: function (res) {
      height.value = res.windowHeight
      //res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
      statusHeight.value = res.statusBarHeight * 2
    },
  })
})

/**
 * 获取产品详情
 *
 */
//商品详情
const storeInfo = ref({
  merchant: {},
})
const comboList = ref([])
const description = ref({})
const replyCount = ref(0) //总评论数量
const reply = ref([]) //评论列表
const replyChance = ref(0)
const attr = ref({
  cartAttr: false,
  productAttr: [],
  productSelect: {},
})
const productValue = ref([]) //系统属性
const sharePacket = ref({
  isState: true, //默认不显示
}) //分销商详细
const systemStore = ref({}) //门店信息
const storeSelfMention = ref(true)
const PromotionCode = ref('') //二维码图片
const activity = ref([])
const shippingValue = ref('')
const guarantee = ref([])
const shipping = ref('')
const uniqueValue = ref('')
const max_count = ref(0)
const min_count = ref(0)
const svipData = ref({})
const svipPrice = ref(false)
const specsInfo = ref({
  show: false,
  params: [],
})
const storeImage = ref('') //海报产品图
const navActive = ref(0)
function getGoodsDetails() {
  uni.showLoading({
    title: '加载中',
    mask: true,
  })

  getProductDetail(id.value)
    .then((res) => {
      uni.hideLoading()
      if (res.data) {
        let _storeInfo = res.data
        if (_storeInfo.video_link && _storeInfo.slider_image.length > 1) {
          videoCoverImg.value = _storeInfo.slider_image[0]
          _storeInfo.slider_image.splice(0, 1)
        } else if (_storeInfo.video_link && _storeInfo.slider_image.length === 1) {
          videoCoverImg.value = _storeInfo.slider_image[0]
        }
        storeInfo.value = _storeInfo
        description.value = _storeInfo.content

        if (description.value.type == 0) {
          description.value.content = description.value.content.replace(
            /<img/gi,
            '<img style="max-width:100%;height:auto;float:left;display:block" ',
          )
          description.value.content = description.value.content.replace(
            /<video/gi,
            '<video style="width:100%;height:300px;display:block" ',
          )
        }
        reply.value = res.data.topReply ? [res.data.topReply] : []
        replyCount.value = res.data.replayData && res.data.replayData.count
        replyChance.value = res.data.replayData && res.data.replayData.rate
        attr.value.productAttr = res.data.attr
        productValue.value = res.data.sku
        sharePacket.value.priceName = res.data.priceName
        sharePacket.value.max = res.data.max_extension
        sharePacket.value.min = res.data.min_extension
        systemStore.value = res.data.system_store
        storeSelfMention.value = res.data.store_self_mention
        PromotionCode.value = storeInfo.value.code_base
        activity.value = res.data.activity ? res.data.activity : []
        shippingValue.value = res.data.temp ? res.data.temp.name : ''
        guarantee.value = res.data.guaranteeTemplate ? res.data.guaranteeTemplate : []
        shipping.value = res.data.temp ? res.data.temp.info : ''
        max_count.value = res.data.once_max_count
        min_count.value = res.data.once_min_count
        svipData.value = res.data.show_svip_info || null
        // that.$set(that, 'guaranteeValue', res.data.guarantee ? res.data.guarantee.template_name : '');
        svipPrice.value =
          (res.data.show_svip_info && res.data.show_svip_info.show_svip_price) || false
        specsInfo.value.params = res.data.params
        //              uni.setNavigationBarTitle({
        //                  title: _storeInfo.store_name.substring(0, 7) + '...',
        //              })
        storeImage.value = _storeInfo.image

        if (isLogin.value) {
          downloadFilePromotionCode()
          getCartCount()
        }

        // #ifdef H5
        ShareInfo()
        // #endif
        setTimeout(function () {
          infoScroll()
        }, 500)
        DefaultSelect()
        getPricrRule(storeInfo.value.cate_id)
        // that.$nextTick(function() {
        getCouponList()
        // })
      } else {
        uni.showModal({
          title: '提示',
          content: res.message,
          showCancel: false,
          success: function (res) {
            navigateBack()
          },
        })
      }
    })
    .catch((err) => {
      console.log(err)
      //状态异常返回上级页面
      // return proxy.$util.Tips({
      //   title: err
      // }, {
      //   tab: 3,
      //   url: 1
      // });
    })
}
//#ifdef H5
function ShareInfo() {
  let data = storeInfo.value
  let href = location.href
  // if (this.$wechat.isWeixin()) {
  // 	getUserInfo().then(res => {
  // 		href =
  // 			href.indexOf("?") === -1 ?
  // 			href + "?spid=" + res.data.uid :
  // 			href + "&spid=" + res.data.uid;

  // 		let configAppMessage = {
  // 			desc: data.store_info,
  // 			title: data.store_name,
  // 			link: href,
  // 			imgUrl: data.image
  // 		};
  // 		this.$wechat.wechatEvevt([
  // 			"updateAppMessageShareData",
  // 			"updateTimelineShareData",
  // 			"onMenuShareAppMessage",
  // 			"onMenuShareTimeline"
  // 		], configAppMessage).then(res => {
  // 		}).catch(err => {
  // 			console.log(err);
  // 		})
  // 	});
  // }
}

//#endif
function changeAuth() {
  uni.makePhoneCall({
    // 手机号
    phoneNumber: storeInfo.value.merchant.service_phone,
    // 成功回调
    success: (res) => {},
    // 失败回调
    fail: (res) => {},
  })
}

function changeAuthcun() {
  uni.saveImageToPhotosAlbum({
    filePath: posterImage.value,
    success: function (res) {
      posterImageClose()
      proxy.$util.Tips({
        title: '保存成功',
        icon: 'success',
      })
    },
    fail: function (res) {
      proxy.$util.Tips({
        title: '保存失败',
      })
    },
  })
}
/**
 * 获取优惠券
 *
 */
function getCouponList() {
  let goodsArr = []
  let _couponList = []
  let pcouponList = []
  let activeList = []
  getCoupons({
    ids: id.value,
  }).then((res) => {
    goodsArr = res.data
    getShopCoupons(storeInfo.value.mer_id).then(({ data }) => {
      if (data) {
        _couponList = goodsArr.concat(data)
      }
      getPlatFormCoupon(id.value).then((r) => {
        if (r.data) {
          pcouponList = _couponList.concat(r.data)
        }
        coupon.value.list = pcouponList
        for (let i = 0; i < pcouponList.length; i++) {
          if (!pcouponList?.[i]?.issue && activeList?.length < 2) {
            activeList.push(pcouponList[i])
          }
        }
        couponList.value = activeList
      })
    })
  })
}

function infoScroll() {
  var _topArr = [],
    _heightArr = []
  // for (var i = 0; i < navList.value.length; i++) { //productList
  // 	//获取元素所在位置
  // 	var query = uni.createSelectorQuery().in(this);
  // 	var idView = "#past" + i;
  // 	query.select(idView).boundingClientRect();
  // 	query.exec(function(res) {
  // 		var top = res[0].top;
  // 		var height = res[0].height;
  // 		_topArr.push(top);
  // 		_heightArr.push(height);
  //      topArr.value=_topArr;
  // 		heightArr.value=_heightArr;
  // 	});
  // };
}

/**
 * 默认选中属性
 *
 */
function DefaultSelect() {
  let productAttr = attr.value.productAttr
  let value = []
  let arr = []
  let unSortArr = []
  for (var key in productValue.value) {
    if (productValue.value[key].stock > 0) {
      value = attr.value.productAttr.length ? key.split(',') : []
      break
    }
  }
  for (let i = 0; i < productAttr.length; i++) {
    productAttr[i].index = value[i]
  }
  //sort();排序函数:数字-英文-汉字；
  let productSelect = productValue.value[value.join(',')]
  if (productSelect && productAttr.length) {
    attr.value.productSelect.store_name = storeInfo.value.store_name
    attr.value.productSelect.image = productSelect.image
      ? productSelect.image
      : storeInfo.value.image
    attr.value.productSelect.price = productSelect.price
    attr.value.productSelect.svip_price = productSelect.svip_price
    attr.value.productSelect.stock = productSelect.stock
    attr.value.productSelect.unique = productSelect.unique
    attr.value.productSelect.cart_num = 1
    uniqueValue.value = productSelect.unique
    attrValue.value = value.join(',')
    attrTxt.value = '选择'

    if (productSelect.stock == 0) {
      attr.value.productSelect.cart_num = 0
    } else {
      attr.value.productSelect.cart_num = 1
    }
  } else if (!productSelect && productAttr.length) {
    attr.value.productSelect.store_name = storeInfo.value.store_name
    attr.value.productSelect.image = storeInfo.value.image
    attr.value.productSelect.price = storeInfo.value.price
    attr.value.productSelect.svip_price = storeInfo.value.svip_price
    attr.value.productSelect.stock = 0
    attr.value.productSelect.unique = ''
    attr.value.productSelect.cart_num = 0
    uniqueValue.value = ''
    attrValue.value = ''
    attrTxt.value = '选择'
  } else if (!productSelect && !productAttr.length) {
    attr.value.productSelect.store_name = storeInfo.value.store_name
    attr.value.productSelect.image = storeInfo.value.image
    attr.value.productSelect.price = storeInfo.value.price
    attr.value.productSelect.svip_price = storeInfo.value.svip_price
    attr.value.productSelect.stock = storeInfo.value.stock
    attr.value.productSelect.unique = storeInfo.value.unique || ''
    attr.value.productSelect.cart_num = 1
    uniqueValue.value = storeInfo.value.unique || ''
    attrValue.value = ''
    attrTxt.value = '选择'
  } else if (productSelect && !productAttr.length) {
    attr.value.productSelect.store_name = storeInfo.value.store_name
    attr.value.productSelect.image = productSelect.image
    attr.value.productSelect.price = productSelect.price
    attr.value.productSelect.svip_price = productSelect.svip_price
    attr.value.productSelect.stock = productSelect.stock
    attr.value.productSelect.unique = productSelect.unique
    uniqueValue.value = productSelect.unique
    attrValue.value = value.join(',')
    attrTxt.value = '选择'

    if (productSelect.stock == 0) {
      attr.value.productSelect.cart_num = 0
    } else {
      attr.value.productSelect.cart_num = 1
    }
  }
}
/*获取价格说明*/
function getPricrRule() {
  priceRuleApi(storeInfo.value.cate_id)
    .then((res) => {
      if (res.data) priceRule.value = res.data
    })
    .catch((err) => {})
}
/**
 * 立即购买
 */
function goBuy(e) {
  var userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    isAuto.value = true
    isShowAuth.value = true
  } else {
    goCat(true)
    isPlay.value++
  }
}
/**
 * 获取产品分销二维码
 * @param function successFn 下载完成回调
 *
 */
function downloadFilePromotionCode(successFn) {
  let type
  // #ifndef MP
  type = 'wechat'
  // #endif
  // #ifdef MP
  type = 'routine'
  // #endif
  getProductCode(id.value, {
    type: 'routine',
    product_type: 0,
  })
    .then(async (res) => {
      codeImg.value = res.data.url
    })
    .catch((err) => {
      PromotionCode.value = ''
    })
}

function call() {
  nextTick(() => {
    authpup.value.open()
  })
}
/**
 * 购物车手动填写
 *
 */
function iptCartNum(e) {
  attr.value.productSelect.cart_num = e
}
// 后退
function returns() {
  navigateBack()
}
// 首页
function goHome() {
  uni.switchTab({
    url: '/pages/index/index',
  })
}
/**
 * 打开属性加入购物车
 *
 */
function joinCart(e) {
  var userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    isAuto.value = true
    isShowAuth.value = true
  } else {
    goCat()
  }
}
/*
 * 加入购物车
 */
function goCat(news) {
  let productSelect = productValue.value[attrValue.value]
  //打开属性
  if (attrValue.value) {
    //默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
    attr.value.cartAttr = !isOpen.value ? true : false
    // if(!that.isOpen)that.attr.cartAttr = true
  } else {
    if (isOpen.value) attr.value.cartAttr = true
    else attr.value.cartAttr = !attr.value.cartAttr
  }
  //只有关闭属性弹窗时进行加入购物车
  if (attr.value.cartAttr === true && isOpen.value === false) return (isOpen.value = true)

  isOpen.value = attr.value.cartAttr = true
  //如果有属性,没有选择,提示用户选择
  if (attr.value.productAttr.length && isOpen.value === true && productSelect.stock == 0)
    return proxy.$util.Tips({
      title: '产品库存不足，请选择其它',
    })
  if (attr.value.productSelect.cart_num == 0) {
    return proxy.$util.Tips({
      title: '购买个数不能为0！',
    })
  }
  if (min_count.value > attr.value.productSelect.cart_num)
    return uni.showToast({
      title: '不能低于限购数量',
      icon: 'none',
    })
  let q = {
    // productId: that.id,
    // cartNum: that.attr.productSelect.cart_num,
    is_new: news === undefined ? 0 : 1,
    // uniqueId: that.attr.productSelect !== undefined ?
    // 	that.attr.productSelect.unique : ""
    product_id: id.value,
    cart_num: attr.value.productSelect.cart_num,
    product_attr_unique:
      attr.value.productSelect !== undefined ? attr.value.productSelect.unique : '',
    source: source.value,
    product_type: 0,
    spread_id: currSpid.value,
  }
  postCartAdd(q)
    .then(function (res) {
      console.log(res)
      isOpen.value = attr.value.cartAttr = false
      if (news) {
        uni.navigateTo({
          url: '/pagesS/order/submitOrder?cartId=' + res.data.cart_id,
        })
      } else {
        if (res.status == 200) {
          proxy.$util.Tips({
            title: '添加购物车成功！',
          })
          getCartCount(true)
        } else {
          proxy.$util.Tips({
            title: res.message,
          })
        }
      }
    })
    .catch((res) => {
      proxy.$util.Tips({
        title: res,
      })
    })
}

/**
 * 获取购物车数量
 * @param boolean 是否展示购物车动画和重置属性
 */
function getCartCount(isAnima) {
  if (isLogin.value) {
    getCartCounts().then((res) => {
      console.log(res)
      if (res.data) {
        CartCount.value = res.data[0].count
        //加入购物车后重置属性
        if (isAnima) {
          animated.value = true
          setTimeout(function () {
            animated.value = false
          }, 500)
        }
      }
    })
  }
}
/**
 *
 *
 * 收藏商品
 */
function setCollect() {
  var userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    isAuto.value = true
    isShowAuth.value = true
  } else {
    collectAdd({
      type_id: id.value,
      type: 0,
    }).then((res) => {
      storeInfo.value.isRelation = !storeInfo.value.isRelation
    })
  }
}

function gotocar() {
  var userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
  } else {
    uni.navigateTo({
      url: '/pagesS/trolley/trolley',
    })
  }
}
function couponTap2() {
  const store = useMemberStore()
  var userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    isAuto.value = true
    isShowAuth.value = true
  } else {
    uni.navigateTo({
      url: `/pagesS/chat/customer_list/chat?mer_id=${storeInfo.value.mer_id}&uid=${store.userInfo?.user?.uid}&productId=${id.value}`,
    })
  }
}
/**
 * 打开优惠券插件
 */
function couponTap() {
  var userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    isAuto.value = true
    isShowAuth.value = true
  } else {
    // that.getCouponList();
    coupon.value.coupon = true
  }
}
/**
 * 分享打开
 *
 */
function listenerActionSheet() {
  var userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    isAuto.value = true
    isShowAuth.value = true
  } else {
    // #ifdef H5
    // if (this.$wechat.isWeixin() === true) {
    // 	weixinStatus.value = true;
    // }
    // #endif
    posters.value = true
    isPlay.value++
  }
}
/**查看服务保障*/
function showGuaranee() {
  guartemplate.value.showGuaranteeTel()
}
/**查看运费说明*/
function showShip() {
  guartemplate.value.showShippingTel()
}
/*查看套餐详情*/
function openCombo() {
  discounts.value.showPopup(id.value)
}
const navbarisshow = ref(true)
function videoPlay(e) {
  navbarisshow.value = e
}

function toclickLeft() {
  console.log('2222222222')
  isPlay.value++
}
/**
 * 打开属性插件
 */
function selecAttr() {
  attr.value.cartAttr = true
  isOpen.value = true
}
function scroll(e) {
  isPlay.value++
  var _scrollY = e.detail.scrollTop
  var _opacity = _scrollY / 200
  _opacity = _opacity > 1 ? 1 : _opacity
  showAnimate.value = false
  opacity.value = _opacity
  scrollY.value = _scrollY

  if (lock.value) {
    lock.value = false
    return
  }
  for (var i = 0; i < topArr.value.length; i++) {
    if (scrollY < topArr.value[i] - app.globalData.navHeight / 2 + heightArr.value[i]) {
      navActive.value = i
      break
    }
  }
  uni.$emit('scroll')
}
/**
 * 生成海报
 */
async function goPoster() {
  if (posterImage.value) {
    posterImageStatus.value = true
    posters.value = false
    return
  }
  let arr2
  posters.value = false
  canvasStatus.value = true
  uni.showLoading({
    title: '海报生成中',
    mask: true,
    duration: 1000,
    complete: (complete) => {
      uni.hideLoading()
    },
  })
  // #ifdef MP || APP-PLUS
  arr2 = [
    posterbackgd.value,
    await fileStoreImage(storeImage.value),
    await fileStoreImage(codeImg.value),
    await fileStoreImage(share_pic.value),
  ]
  // #endif
  // #ifdef H5
  arr2 = [
    posterbackgd.value,
    await imgToBaseFun(storeImage.value),
    await imgToBaseFun(codeImg.value),
    await imgToBaseFun(share_pic.value),
  ]
  // #endif
  //生成推广海报
  console.log(arr2)
  proxy?.$util?.goodsPosterCanvas(
    arr2,
    storeInfo.value.store_name,
    storeInfo.value.price,
    site_name.value,
    storeInfo.value.ot_price,
    function (tempFilePath) {
      console.log(tempFilePath)
      posterImage.value = tempFilePath
      posterImageStatus.value = true
      actionSheetHidden.value = !actionSheetHidden.value
      canvasStatus.value = false
    },
    (err) => {
      canvasStatus.value = false
    },
  )
}

async function imgToBaseFun(url) {
  console.log(url)
  let res = await imgToBase({
    image: url,
  })
  return res.data.image
}
//复制口令
function copyPwd() {
  copyPasswordApi({
    id: id.value,
    product_type: 0,
  }).then(async (res) => {
    copyUrl.value = res.data.str
    // posters.value = false
    isCopy.value = true
  })
}
function closeCopy() {
  isCopy.value = false
  posters.value = false
}
function seeSpecs() {
  specsInfo.value.show = true
}
function mySpecs() {
  specsInfo.value.show = false
}
/**
 * 购物车数量加和数量减
 *
 */
function ChangeCartNum(changeValue) {
  //changeValue:是否 加|减
  //获取当前变动属性
  let productSelect = productValue.value[attrValue.value]
  //如果没有属性,赋值给商品默认库存
  if (productSelect === undefined && !attr.value.productAttr.length)
    productSelect = attr.value.productSelect
  //无属性值即库存为0；不存在加减；
  if (productSelect === undefined) return
  let stock = productSelect.stock || 0
  let num = attr.value.productSelect
  if (changeValue) {
    num.cart_num++
    if (num.cart_num > stock) {
      attr.value.productSelect.cart_num = stock
      cart_num.value = stock
    }
    if (num.cart_num > storeInfo.value.once_max_count && storeInfo.value.once_max_count != 0) {
      attr.value.productSelect.cart_num = storeInfo.value.once_max_count
      cart_num.value = storeInfo.value.once_max_count

      return proxy.$util.Tips({
        title: '单次购买件数不能超过' + storeInfo.value.once_max_count + '件！',
      })
    }
  } else {
    num.cart_num--
    if (num.cart_num < 1) {
      attr.value.productSelect.cart_num = 1
      cart_num.value = 1
    }
  }
}
function attrVal(val) {
  attr.value.productAttr[val.indexw].index =
    attr.value.productAttr[val.indexw].attr_values[val?.indexn]
}
/**
 * 属性变动赋值
 *
 */
function ChangeAttr(res) {
  let productSelect = productValue.value[res]
  if (productSelect) uniqueValue.value = productSelect.unique
  if (productSelect && productSelect.stock > 0) {
    attr.value.productSelect.image = productSelect.image
      ? productSelect.image
      : storeInfo.value.image
    attr.value.productSelect.price = productSelect.price
    attr.value.productSelect.svip_price = productSelect.svip_price
    attr.value.productSelect.stock = productSelect.stock
    attr.value.productSelect.unique = productSelect.unique
    attr.value.productSelect.cart_num = 1
    uniqueValue.value = productSelect.unique
    attrValue.value = res
    attrTxt.value = '选择'
  } else {
    attr.value.productSelect.image = productSelect.image
    attr.value.productSelect.price = productSelect.price
    attr.value.productSelect.svip_price = productSelect.svip_price
    attr.value.productSelect.stock = 0
    attr.value.productSelect.unique = ''
    attr.value.productSelect.cart_num = 0
    attrValue.value = ''
    attrTxt.value = '选择'
  }
}
//图片转符合安全域名路径
function fileStoreImage(url) {
  // #ifdef MP  || APP-PLUS
  let ishttps = url.split('//')[0] == 'https:'
  if (!ishttps) {
    url = 'https://' + url.split('//')[1]
  }
  // #endif
  return new Promise((resolve, reject) => {
    uni.downloadFile({
      url: url,
      success: function (res) {
        resolve(res.tempFilePath)
      },
      fail: function () {
        return proxy.$util.Tips({
          title: '',
        })
      },
    })
  })
}
// 分享关闭
function listenerActionClose() {
  posters.value = false
}
//隐藏海报
function posterImageClose() {
  posterImageStatus.value = false
}
function onMyEvent() {
  attr.value.cartAttr = false
  isOpen.value = false
}
// APP分享
function appShare(scene) {
  uni.showLoading({
    title: '加载中',
    mask: true,
  })
  uni.share({
    provider: 'weixin',
    scene: scene,
    type: 5,
    title: storeInfo.value.store_name,
    imageUrl: storeInfo.value.image,
    miniProgram: {
      id: 'gh_d1fa123f9290',
      path: 'pages/goods_details/index?id=' + id.value,
      type: 0,
      webUrl: 'http://miyingbl.com',
    },
    success: function (res) {
      uni.showToast({
        title: '分享成功',
        icon: 'success',
      })
      posters.value = false
      uni.hideLoading()
    },
    fail: function (err) {
      console.log(err)
      uni.showToast({
        title: '分享失败',
        icon: 'none',
        duration: 2000,
      })
      posters.value = false
      uni.hideLoading()
    },
    complete: (complete) => {
      posters.value = false
      uni.hideLoading()
    },
  })
  setTimeout(() => {
    posters.value = false
    uni.hideLoading()
  }, 2000)
}
function getConfigFun() {
  // 获取配置
  getconfig()
    .then((res) => {
      hide_mer_status.value = res.data.hide_mer_status
      arrival_notice.value = res.data.procudt_increase_status
    })
    .catch((err) => {})
}
function goProDetail(item) {
  uni.navigateTo({
    url: '/pagesS/goodsDetail/goodsDetail?id=' + item?.product_id,
  })
}
function ChangCouponsClone() {
  coupon.value.coupon = false
}
function ChangCouponsUseState(index) {
  coupon.value.coupon = false
}
/**
 * 领取完毕移除当前页面领取过的优惠券展示
 */
function ChangCoupons(e) {
  let coupon = e
  let _couponList = proxy.$util.ArrayRemove(couponList.value, 'id', coupon.id)
  couponList.value = _couponList
  this.getCouponList()
}
/*
 * 保存到手机相册
 */
// #ifdef MP
function savePosterPath() {
  uni.getSetting({
    success(res) {
      if (!res.authSetting['scope.writePhotosAlbum']) {
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            uni.saveImageToPhotosAlbum({
              filePath: posterImage.value,
              success: function (res) {
                posterImageClose()
                proxy.$util.Tips({
                  title: '保存成功',
                  icon: 'success',
                })
              },
              fail: function (res) {
                proxy.$util.Tips({
                  title: '保存失败',
                })
              },
            })
          },
        })
      } else {
        uni.saveImageToPhotosAlbum({
          filePath: posterImage.value,
          success: function (res) {
            posterImageClose()
            proxy.$util.Tips({
              title: '保存成功',
              icon: 'success',
            })
          },
          fail: function (res) {
            proxy.$util.Tips({
              title: '保存失败',
            })
          },
        })
      }
    },
  })
}
// #endif
// #ifdef APP-PLUS
function savePosterPath() {
  nextTick(() => {
    authpupcun.value.open()
  })
}
// #endif
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
@import '@/styles/shop.scss';

.ml8 {
  top: 2rpx;
}

.activity_pin {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(250, 101, 20, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  padding: 0 15rpx;
  margin-left: 19rpx;
}

.activity_miao {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.iconfonts {
  color: #fff !important;
  font-size: 28rpx;
}

.activity_title {
  font-size: 24rpx;
  color: #fff;
}

.activity_kan {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(90deg, rgba(254, 159, 15, 1) 0%, rgba(254, 178, 15, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.t-color {
  color: var(--view-theme);
}

.p-color {
  color: var(--view-priceColor);
}

.bt-color {
  background-color: var(--view-theme);
  border: 1px solid var(--view-theme);
}

.head-bar {
  background: #fff;
}

.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1px solid #eee;
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  /* #ifdef H5 */
  flex: 50%;
  /* #endif */
  /* #ifndef H5 */
  flex: 33.33%;
  /* #endif */
  text-align: center;
  font-size: 30rpx;

  &.item3 {
    flex: 33.33%;
  }
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.generate-posters .item .iconfont.icon-fuzhikouling1 {
  color: #fbb324;
}

.product-con .footer {
  padding: 0 30rpx 0 30rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  height: 100rpx;
  height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  background-color: #fff;
  z-index: 277;
  border-top: 1px solid #f0f0f0;
}

.product-con .footer .item {
  font-size: 18rpx;
  color: #666;
  text-align: center;
}

.product-con .attribute .atterTxt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 400rpx;
}

.product-con .attribute .params {
  margin-right: 20rpx;
  font-size: 28rpx;
  color: #282828;

  &:nth-child(2) {
    margin-right: 0;
  }
}

.product-con .attribute .atterTxt1 {
  color: #282828;

  &.hasAttr {
    &:after {
      content: '';
      display: inline-block;
      position: relative;
      top: -6rpx;
      margin: 0 6rpx;
      width: 5rpx;
      height: 5rpx;
      background-color: #282828;
      border-radius: 100%;
    }

    &:last-child {
      &:after {
        display: none;
      }
    }
  }
}

.product-con .wrapper .coupon .activity {
  border: 1px solid var(--view-theme);
  color: var(--view-theme);

  &::before,
  &::after {
    border: 1px solid var(--view-theme);
  }

  &::before {
    border-left-color: #ffffff;
  }

  &::after {
    border-right-color: #ffffff;
  }
}

.product-con .guaranteeAttr {
  display: inline-block;
  width: 560rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}

.product-con .wrapper .introduce {
  margin: 20rpx 30rpx 0;

  // min-height: 90rpx;
  &.atmosphere {
    padding: 20rpx 94rpx 0 30rpx;
    margin: 0;

    .fenxiang_btn {
      top: 8rpx;
      right: 30rpx;
    }
  }

  .font-bg-red {
    position: relative;
    /* #ifdef H5 */
    top: -2rpx;
    /* #endif */
    /* #ifndef H5 */
    top: -4rpx;
    /* #endif */
  }
}

.product-con .footer .item .iconfont.icon-shoucang1 {
  color: var(--view-priceColor);
}

.integral_count {
  padding: 0 30rpx;
}

.product-con .integral {
  display: inline-block;
  margin: 20rpx 30rpx 0 0;
  color: #ff9000;
  background-color: #fff4e6;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 22rpx;
  padding: 0 26rpx;
  font-size: 24rpx;
  font-weight: normal;

  &:last-child {
    margin-left: 0;
  }
}

.product-con .footer .item .iconfont.icon-gouwuche1 {
  font-size: 40rpx;
  position: relative;
}

.product-con .footer .item .iconfont.icon-gouwuche1 .num {
  color: #fff;
  position: absolute;
  font-size: 18rpx;
  height: 30rpx;
  border-radius: 200rpx;
  padding: 0 8rpx;
  box-sizing: border-box;
  top: -10rpx;
  right: -10rpx;
  background-color: var(--view-theme);
  min-width: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-con .footer .bnt {
  width: 444rpx;
  height: 76rpx;
}

.product-con .footer .bnt .bnts {
  width: 222rpx;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;

  &.sold_out {
    width: 444rpx;
    border-radius: 50rpx;
  }

  &.virtual_buy {
    width: 444rpx;
    border-radius: 50rpx;
  }
}

.product-con .footer .bnt .joinCart {
  border-radius: 50rpx 0 0 50rpx;
  background-image: linear-gradient(90deg, var(--view-bntColor11) 0%, var(--view-bntColor12) 100%);

  &.disabled {
    background: #bbb;
  }
}

.product-con .footer .bnt .buy {
  border-radius: 0 50rpx 50rpx 0;
  background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
}

.product-con .footer .bnt .buy[disabled] {
  background: #bbb;
}

.product-con .superior {
  background-color: #fff;
  margin-top: 20rpx;
  padding-bottom: 10rpx;
}

.product-con .superior .title {
  height: 98rpx;
}

.product-con .superior .title image {
  width: 30rpx;
  height: 30rpx;
}

.product-con .superior .title .titleTxt {
  margin: 0 20rpx;
  font-size: 30rpx;
  background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-con .superior .slider-banner {
  width: 690rpx;
  margin: 0 auto;
  position: relative;
}

.product-con .superior .slider-banner swiper {
  height: 100%;
  width: 100%;
}

.product-con .superior .slider-banner swiper-item {
  height: 100%;
}

.product-con .superior .slider-banner .list {
  width: 100%;
}

.product-con .superior .slider-banner .list .item {
  width: 215rpx;
  margin: 0 22rpx 30rpx 0;
  font-size: 26rpx;
}

.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
  position: relative;
  width: 100%;
  height: 215rpx;
}

.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 12rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: #e93323;
}

.svipCon {
  height: 64rpx;
  padding: 0 20rpx;
  margin: 8rpx 20rpx 0;
  background: #fae3bb;
  font-size: 24rpx;
  color: #b37400;
  border-radius: 10rpx;

  image {
    width: 38rpx;
    height: 38rpx;
    margin-right: 20rpx;
  }
}

.svipCon .svipBtn {
  font-size: 22rpx;

  .iconfont {
    font-size: 18rpx;
    margin-left: 4rpx;
  }
}

button {
  padding: 0;
  margin: 0;
  line-height: normal;
  background-color: #fff;
}

button::after {
  border: 0;
}

action-sheet-item {
  padding: 0;
  height: 240rpx;
  align-items: center;
  display: flex;
}

.contact {
  font-size: 16px;
  width: 50%;
  background-color: #fff;
  padding: 8rpx 0;
  border-radius: 0;
  margin: 0;
  line-height: 2;
}

.contact::after {
  border: none;
}

.action-sheet {
  font-size: 17px;
  line-height: 1.8;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25rpx 0;
}

.canvas {
  z-index: 300;
  width: 750px;
  height: 1190px;
}

.poster-pop {
  width: 600rpx;
  height: 897rpx;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 399;
  top: 50%;
  margin-top: -500rpx;
}

.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}

.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: 22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
  border-radius: 43rpx;
  margin-top: 20rpx;
}

.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}

.pictrue_log {
  width: 80upx;
  height: 40upx;
  border-radius: 6upx 0 12upx 0;
  line-height: 40upx;
  font-size: 24upx;
}

.pictrue_log_class {
  z-index: 3;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(246, 122, 56, 1)),
    to(rgba(241, 27, 9, 1))
  );
  background: linear-gradient(90deg, rgba(246, 122, 56, 1) 0%, rgba(241, 27, 9, 1) 100%);
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  text-align: center;
}

.navbar .header {
  height: 96rpx;
  font-size: 30rpx;
  color: #050505;
  background-color: #fff;
  /* #ifdef MP */
  padding-right: 95rpx;
  /* #endif */
}

.navbar .header .item {
  position: relative;
  margin: 0 25rpx;
}

.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: '';
  background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}

.navbar {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.navbar .navbarH {
  position: relative;
}

.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}

.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.store-wrapper {
  margin-top: 20rpx;
  background-color: #fff;

  .store-hd {
    padding: 30rpx;
    border-bottom: 1px solid #f5f5f5;

    .store-info {
      position: relative;
      display: flex;

      .store-margin {
        width: 24rpx;
        height: 26rpx;
        margin-left: 10rpx;
      }

      .logo {
        width: 86rpx;
        height: 86rpx;

        image {
          width: 86rpx;
          height: 86rpx;
          border-radius: 6rpx;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20rpx;

        .name {
          font-size: 28rpx;
          color: #282828;
          font-weight: bold;
          display: flex;
          align-items: center;
        }

        .txt {
          margin-top: 8rpx;
          color: #666666;
          font-size: 22rpx;
        }
      }

      .link {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 114rpx;
        height: 50rpx;
        background-image: linear-gradient(
          -90deg,
          var(--view-bntColor21) 0%,
          var(--view-bntColor22) 100%
        );
        border-radius: 25rpx;
        color: #fff;
      }
    }

    .score-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;

      .item {
        color: #948d8c;
        font-size: 26rpx;

        text {
          margin-left: 10rpx;
          color: var(--view-priceColor);
        }
      }
    }
  }

  .con-box {
    padding: 20rpx 0 20rpx 30rpx;

    .title {
      font-size: 28rpx;
      color: #282828;
      margin-bottom: 20rpx;
    }

    .img-box {
      display: flex;

      .img-item {
        width: 218rpx;
        margin-right: 20rpx;

        ::v-deep image,
        ::v-deep uni-image,
        ::v-deep .easy-loadimage {
          width: 218rpx;
          height: 218rpx;
          border-radius: 16rpx;
          display: inline-block;
        }

        .txt {
          .title {
            font-size: 28rpx;
            color: #282828;
          }

          .price {
            color: var(--view-priceColor);
            font-size: 28rpx;

            text {
              font-size: 20rpx;
            }
          }
        }
      }
    }
  }
}

.sys-head {
  background: transparent;
}

.head-wrapper {
  z-index: 999;
  display: flex;
  align-items: center;
  position: fixed;
  left: 30rpx;
  top: 0;
  /* #ifdef MP */
  height: 43px;
  /* #endif */
  /* #ifdef H5 */
  height: 114rpx;
  /* #endif */
}

.head-menu {
  display: flex;
  align-items: center;
  // height: 54rpx;
  // width: 140rpx;
  height: 44rpx;
  width: 70rpx;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 27rpx;

  .iconfont {
    flex: 1;
    text-align: center;
    color: #fff;
    box-sizing: border-box;

    // &.icon-xiangzuo {
    //   border-right: 1px solid #fff;
    // }
  }
}

.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acea-row {
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  flex-wrap: wrap;
}

.product-con .product-intro {
  position: relative;
  margin-top: 20rpx;
  width: 100%;
  overflow: hidden;
}

.product-con .product-intro .title {
  font-size: 30rpx;
  color: #282828;
  height: 86rpx;
  width: 100%;
  background-color: #fff;
  text-align: center;
  line-height: 86rpx;
}

.product-con .product-intro .conter {
  width: 100%;
}

.product-con .product-intro .conter image {
  width: 100% !important;
  display: block !important;
}
</style>
